<template>
  <!-- 编辑的弹出框 -->
  <el-dialog
    :title="`${showText}学生信息`"
    :visible.sync="showDialogEdit"
    @close="btnCancel"
  >
    <el-form
      :model="formData"
      :rules="rules"
      ref="editForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-col :span="12">
        <el-form-item label="归属学科" prop="subject_id">
          <el-select
            v-model="formData.subject_id"
            placeholder="请选择"
            clearable
            @focus="subjectClass"
            @change="subjectChange"
          >
            <el-option
              v-for="item in subject"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select> </el-form-item
      ></el-col>
      <el-col :span="12">
        <el-form-item label="归属班级" prop="class_id">
          <el-select
            v-model="formData.class_id"
            placeholder="请确保已选择学科"
            clearable
            @focus="className"
          >
            <el-option
              v-for="item in classs"
              :key="item.id"
              :label="item.class_name"
              :value="item.id"
            ></el-option>
          </el-select> </el-form-item
      ></el-col>
      <el-col :span="12">
        <el-form-item label="学生姓名" prop="student_name" required>
          <el-input
            v-model.trim="formData.student_name"
            clearable
            placeholder="请输入学生姓名"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="手机号码" prop="student_phone" required>
          <el-input
            v-model="formData.student_phone"
            clearable
            placeholder="请输入手机号码"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="密码">
          <el-input
            v-model="formData.student_password2"
            placeholder="留白表示不修改"
            v-if="formData.id"
          ></el-input>
          <el-input
            v-model="formData.student_password"
            placeholder="默认密码是姓名+admin88"
            v-else
          ></el-input> </el-form-item
      ></el-col>
      <el-col :span="12">
        <el-form-item label="性别" v-if="formData.id">
          <el-radio v-model="formData.student_sex" :label="1">男</el-radio>
          <el-radio v-model="formData.student_sex" :label="2">女</el-radio>
        </el-form-item>
        <el-form-item label="性别" v-else>
          <el-radio v-model="sex" :label="1">男</el-radio>
          <el-radio v-model="sex" :label="2">女</el-radio>
        </el-form-item></el-col
      >
      <el-col :span="24">
        <el-form-item label="状态">
          <el-radio-group v-model="formData.student_state" v-if="formData.id">
            <el-radio :label="1">待审核</el-radio>
            <el-radio :label="2">正常</el-radio>
            <el-radio :label="3">禁用</el-radio>
          </el-radio-group>
          <el-radio-group v-model="state" v-else>
            <el-radio :label="1">待审核</el-radio>
            <el-radio :label="2">正常</el-radio>
            <el-radio :label="3">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="showDialogEdit = false">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import moment from "moment";
import { studentShow, editStudentInfo, addStudent } from "@/api/student";
import { subjectClass, getClass } from "@/api/class";
export default {
  name: "EditStudent",
  components: {},
  props: {},
  data() {
    function checkPhone(rule, value, callback) {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的手机号"));
        }
      }
    }
    return {
      showDialogEdit: false, // 控制编辑的弹出框
      formData: {},
      // 校验
      rules: {
        subject_id: [
          { required: true, message: "请选择学科分类", trigger: "blur" },
        ],
        class_id: [{ required: true, message: "请选择班级", trigger: "blur" }],
        student_name: [
          { required: true, message: "请输入学生姓名", trigger: "blur" },
        ],
        student_phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { validator: checkPhone, trigger: "blur" },
        ],
      },
      subject: [], // 学科
      page: {
        page: 1,
        limit: 1000,
        subject_id: "",
      },
      classs: [], // 班级
      sex: 1, // 性别
      state: 1, // 状态
    };
  },
  computed: {
    showText() {
      return this.formData.id ? "修改" : "添加";
    },
  },
  watch: {},
  created() {
    this.subjectClass();
  },
  mounted() {},
  methods: {
    // 学生信息回显
    async studentShow(id) {
      if (id) {
        this.formData = await studentShow(id);
        console.log("数据回显", this.formData);
        this.page.subject_id = this.formData.subject_id;
      }
    },
    // 学科下拉菜单回显
    async subjectClass() {
      this.subject = await subjectClass();
      console.log("学科回显", this.subject);
    },
    // 归属班级菜单回显
    async className() {
      const { list } = await getClass(this.page);
      this.classs = list;
      console.log("班级", this.classs);
    },
    // 改变学科触发
    async subjectChange(sid) {
      console.log("改变学科", sid);
      this.page.subject_id = sid;
      const { list } = await getClass(this.page);
      this.classs = list;
    },

    // 取消
    btnCancel() {
      this.formData = {};
      this.$refs.editForm.resetFields();
    },
    // 确定
    async onSubmit() {
      // 表单校验
      await this.$refs.editForm.validate();
      // 判断是修改还是添加
      if (this.formData.id) {
        // 提交数据
        // 编辑
        if (this.formData.student_password2) {
          this.formData.student_password = this.formData.student_password2;
          delete this.formData.student_password2;
        }
        console.log("提交", this.formData);

        await editStudentInfo(this.formData);
      } else {
        // 添加
        if (!this.formData.student_password) {
          this.formData.student_password =
            this.formData.student_name + "admin88";
        }
        // console.log(this.formData.student_password);
        // this.formData.creator_at = moment(new Date()).format(
        //   "yyyy-MM-DD HH:mm:ss"
        // );
        this.formData.student_sex = this.sex;
        this.formData.student_state = this.state;
        console.log("添加", this.formData);
        await addStudent(this.formData);
      }
      // 提示
      this.$message.success(this.formData.id ? "修改成功!" : "添加成功!");
      // 关闭
      this.showDialogEdit = false;
      // 列表更新
      this.$emit("update");
    },
  },
};
</script>
<style lang='scss' scoped>
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e9ecef;
}
</style>